<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
<style type="text/css">
	.empty-cart {
		text-align: center;
		padding: 50px 0;
		color: #666;
	}

	.empty-cart p {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.empty-cart .btn {
		display: inline-block;
		padding: 10px 20px;
		background-color: #ff6700;
		color: white;
		text-decoration: none;
		border-radius: 4px;
		transition: background-color 0.3s;
	}

	.empty-cart .btn:hover {
		background-color: #e05c04;
	}

</style>
</head>
<body>
<div class="header_con" th:include="inner::header"></div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl" th:href="@{/index}"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
	</div>

	<div class="total_count">全部商品<em th:text="${carts.size}">2</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	<th:block th:unless="${carts != null and !carts.empty}">
		<div class="empty-cart">
			<p>您的购物车是空的，快去选购商品吧！</p>
			<a href="/list" class="btn">继续购物</a>
		</div>
	</th:block>
	<th:block th:each="cart : ${carts}">
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="cbo-child" th:value="${cart.id}"></li>
		<li class="col02"><img src="../static/images/goods/goods012.jpg" th:src="${cart.product.imageUrl}"></li>
		<li class="col03" >
            <span th:text="${cart.product.name}">奇异果</span>
            <br />
            <em th:text="${cart.product.price} + '元/' + ${cart.product.unit}">25.80元/500g</em>
        </li>
		<li class="col04" th:text="${cart.product.unit}">500g</li>
		<li class="col05" th:text="${cart.product.price} +'元'">25.80元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl" th:onclick="'cartNumChange('+${cart.id}+', true)'">+</a>
				<input type="text" class="num_show fl" value="1" id="num" th:value="${cart.quantity}">
				<a href="javascript:;" class="minus fl" th:onclick="'cartNumChange('+${cart.id}+', false)'">-</a>
			</div>
		</li>
		<li class="col07 subtotal" th:text="${cart.product.price * cart.quantity} + '元'">25.80元</li>
		<li class="col08"><a href="javascript:;" onclick="return confirm('您确定要删除吗？')" th:href="@{cart/delete/{id}(id=${cart.id})}">删除</a></li>
	</ul>
	</th:block>

	<ul class="settlements">
		<li class="col01"><input type="checkbox" id="cbo-qx"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em id="total">0.00</em><br>共计<b id="count">0</b>件商品</li>
		<li class="col04"><a href="#" id="sub_btn" >去结算</a></li>
	</ul>

<div th:include="inner::footer" class="footer"></div>
<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
	var user = [[${session.user}]]

	$(function(){
		// 全选
		$("#cbo-qx").click(function(){
			$(":input[name='cbo-child']").prop("checked", $(this).prop("checked"))
			$('#count').text($(":input[name='cbo-child']:checked").length)
			countTotal()
			addCheckStyle()
		})

		// 子节点选择
		$(":input[name='cbo-child']").click(function(){
			let checkLength = ($(":input[name='cbo-child']:checked").length);
			let childLength = $(":input[name='cbo-child']").length
			$('#cbo-qx').prop('checked', checkLength === childLength);
			$('#count').text(checkLength)
			countTotal()
			addCheckStyle()
		})

		// 结算
		$("#sub_btn").click(function(){
			if($(":input[name='cbo-child']:checked").length === 0){
				alert('请选择要结算的商品')
				return false;
			}else{
				let cartIds = []
				$(":input[name='cbo-child']:checked").each(function(){
					cartIds.push($(this).val())
				})

				window.location.href = 'buy/'+cartIds
			}
		})

	})

	/**
	 * 添加选中样式
	 */
	function addCheckStyle(){
		// 选择的添加 样式，未选中的移除样式
		$(":input[name='cbo-child']:not(:checked)").each(function(){
			$(this).parents("ul").removeClass('check_td')
		})
		$(":input[name='cbo-child']:checked").each(function(){
			$(this).parents("ul").addClass('check_td')
		})
	}

	/**
	 * 计算总价
	 */
	function countTotal(){
		let total = 0;
		// 获取 cbo-child 选中的记录，找到 subtotal 进行统计
		$(":input[name='cbo-child']:checked").each(function(){
			let subtotal = $(this).parents("ul").find(".subtotal").text();
			total += parseFloat(subtotal);
		})
		$("#total").text(total.toFixed(2))
	}

	/**
	 * 购物车商品数量改变
	 *
	 * @param cartId 购物ID
	 * @param isAdd 是否增加
	 */
	function cartNumChange(cartId, isAdd){
		let num = $("#num").val();
		if(isAdd){
			num++;
			$("#num").val(num);
			updateCartNum(cartId, num)
		}else{
			if(num > 1){
				num--;
				$("#num").val(num);
				updateCartNum(cartId, num)
			}
		}
	}

	/**
	 * 修改购物车商品数量
	 * @param cartId 购物ID
	 * @param num 商品数量
	 */
	function updateCartNum(cartId, num){
		let obj = {cartId: cartId, quantity: num};

		$.ajax({
			url: 'cart/update/num',
			type: 'put',
			contentType: 'application/json',
			data: JSON.stringify(obj),
			success: function(result){
				if(result.code == 200){
					window.location.href = 'cart'
				}
			}
		})
	}
</script>
</body>
</html>